<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>命运</title>
    <style>
        body {
            background-color: black;
        }

        .main {
            background-color: rgb(177, 218, 243);
            width: 60%;
            margin: auto;
            height: 800px;
            padding: 30px;
        }

        .title {
            text-align: center;
        }

        .tiangan {
            text-align: center;
        }

        .tiangan>span {
            font-size: 30px;
            cursor: pointer;
            margin-right: 10px;
        }

        .tiangan>span:hover {
            color: white;
            background-color: black;
        }

        .dizhi {
            margin-top: 10px;
            text-align: center;
        }

        .dizhi>span {
            font-size: 30px;
            cursor: pointer;
            margin-right: 10px;
        }

        .dizhi>span:hover {
            color: white;
            background-color: black;
        }

        .displayFire {
            border: solid 2px black;
            margin: 50px auto;
            background-color: red;
            width: 300px;
            height: 300px;
        }

        .displayWater {
            border: solid 2px black;
            margin: 50px auto;
            background-color: blue;
            width: 300px;
            height: 300px;
        }

        .displayWood {
            border: solid 2px black;
            margin: 50px auto;
            background-color: #855E42;
            width: 300px;
            height: 300px;
        }

        .displayGold {
            border: solid 2px black;
            margin: 50px auto;
            background-color: gold;
            width: 300px;
            height: 300px;
        }

        .displaySoil {
            border: solid 2px black;
            margin: 50px auto;
            background-color: #9F9F5F;
            width: 300px;
            height: 300px;
        }

        .top {
            display: flex;
            float: left;
        }

        .symbolOne {
            border: dashed 1px black;
            color: red;
            background-color: aliceblue;
            width: 50px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            font-size: 30px;
        }

        .symbolTwo {
            border: dashed 1px black;
            color: black;
            background-color: aliceblue;
            width: 50px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            font-size: 30px;
        }

        .bottom {
            color: white;
            font-size: 100px;
            line-height: 300px;
        }
        .control{
            display: flex;
            justify-content: center;
            align-items:center;
            margin-top:50px;
        }
    </style>
    <script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://cdn.staticfile.net/vue/2.4.2/vue.min.js"></script>
    <script src="https://cdn.staticfile.net/vue-router/2.7.0/vue-router.min.js"></script>
</head>

<body>
    <div class="main">
        <div class="title">
            <h1>天干地支查询</h1>
        </div>
        <div class="tiangan">
            <span style="font-size:30px;margin-right:10px;font-weight: bolder;">十天干：</span>
            <span v-on:mouseenter="execute($event)">甲</span>
            <span v-on:mouseenter="execute($event)">乙</span>
            <span v-on:mouseenter="execute($event)">丙</span>
            <span v-on:mouseenter="execute($event)">丁</span>
            <span v-on:mouseenter="execute($event)">戊</span>
            <span v-on:mouseenter="execute($event)">己</span>
            <span v-on:mouseenter="execute($event)">庚</span>
            <span v-on:mouseenter="execute($event)">辛</span>
            <span v-on:mouseenter="execute($event)">壬</span>
            <span v-on:mouseenter="execute($event)">癸</span>
        </div>
        <div class="dizhi">
            <span style="font-size:30px;margin-right: 10px;font-weight: bolder;">十二地支：</span>
            <span v-on:mouseenter="execute($event)">子</span>
            <span v-on:mouseenter="execute($event)">丑</span>
            <span v-on:mouseenter="execute($event)">寅</span>
            <span v-on:mouseenter="execute($event)">卯</span>
            <span v-on:mouseenter="execute($event)">辰</span>
            <span v-on:mouseenter="execute($event)">巳</span>
            <span v-on:mouseenter="execute($event)">午</span>
            <span v-on:mouseenter="execute($event)">未</span>
            <span v-on:mouseenter="execute($event)">申</span>
            <span v-on:mouseenter="execute($event)">酉</span>
            <span v-on:mouseenter="execute($event)">戌</span>
            <span v-on:mouseenter="execute($event)">亥</span>
        </div>
        <div class="control">
            <input type="number" value="1" v-model="interval" style="width:50px;height:26px;"/>秒
            <button v-on:click="autoExe($event)" style="font-size:21px;margin-left: 10px;">总览</button>
            <button v-on:click="autoExe($event)" style="font-size:21px;">停止</button>
        </div>
        <div v-bind:class="totalStyle">
            <div class="top">
                <div v-bind:class="topStyle">{{attribute}}</div>
                <div v-bind:class="topStyle">{{sign}}</div>
            </div>
            <div class="bottom">{{message}}</div>
        </div>
    </div>
    <script>
        new Vue({
            el: '.main',
            data: {
                interval:1,
                time: "",
                message: "",
                attribute: "",
                sign: "",
                topStyle: {
                    symbolOne: false,
                    symbolTwo: false
                },
                totalStyle: {
                    displayGold: false,
                    displayWood: false,
                    displayWater: false,
                    displayFire: false,
                    displaySoil: false
                }
            },
            methods: {
                //改变样式函数
                change: function (a, b, c, d, e, f, g) {
                    for (let key in c) {
                        if (c.hasOwnProperty(key)) { // 确保属性是对象自身的而不是从原型链继承的
                            if (key == a) {
                                this.$set(this.topStyle, key, true);
                            } else {
                                this.$set(this.topStyle, key, false);
                            }
                        }
                    }

                    for (let key in d) {
                        if (d.hasOwnProperty(key)) { // 确保属性是对象自身的而不是从原型链继承的
                            if (key == b) {
                                this.$set(this.totalStyle, key, true);
                            } else {
                                this.$set(this.totalStyle, key, false);
                            }
                        }
                    }
                    this.attribute = e;
                    this.sign = f;
                    this.message = g;
                },
                execute: function ($event) {
                    let objOne = this.topStyle;
                    let objTwo = this.totalStyle;
                    switch ($event.target.innerHTML) {
                        case "十天干：": break;
                        case "甲":
                            //整体调用改变样式函数，以减少代码量
                            this.change("symbolOne", "displayWood", objOne, objTwo, "阳", "+", "木");
                            break;
                        case "乙":
                            //整体调用改变样式函数，以减少代码量
                            this.change("symbolTwo", "displayWood", objOne, objTwo, "阴", "-", "木");
                            break;
                        case "丙":
                            //整体调用改变样式函数，以减少代码量
                            this.change("symbolOne", "displayFire", objOne, objTwo, "阳", "+", "火");
                            break;
                        case "丁":
                            //整体调用改变样式函数，以减少代码量
                            this.change("symbolTwo", "displayFire", objOne, objTwo, "阴", "-", "火");
                            break;
                        case "戊":
                            //整体调用改变样式函数，以减少代码量
                            this.change("symbolOne", "displaySoil", objOne, objTwo, "阳", "+", "土");
                            break;
                        case "己":
                            //整体调用改变样式函数，以减少代码量
                            this.change("symbolTwo", "displaySoil", objOne, objTwo, "阴", "-", "土");
                            break;
                        case "庚":
                            //整体调用改变样式函数，以减少代码量
                            this.change("symbolOne", "displayGold", objOne, objTwo, "阳", "+", "金");
                            break;
                        case "辛":
                            //整体调用改变样式函数，以减少代码量
                            this.change("symbolTwo", "displayGold", objOne, objTwo, "阴", "-", "金");
                            break;
                        case "壬":
                            //整体调用改变样式函数，以减少代码量
                            this.change("symbolOne", "displayWater", objOne, objTwo, "阳", "+", "水");
                            break;
                        case "癸":
                            //整体调用改变样式函数，以减少代码量
                            this.change("symbolTwo", "displayWater", objOne, objTwo, "阴", "-", "水");
                            break;
                        case "子":
                            //整体调用改变样式函数，以减少代码量
                            this.change("symbolOne", "displayWater", objOne, objTwo, "阳", "+", "水");
                            break;
                        case "丑":
                            //整体调用改变样式函数，以减少代码量
                            this.change("symbolTwo", "displaySoil", objOne, objTwo, "阴", "-", "土");
                            break;
                        case "寅":
                            //整体调用改变样式函数，以减少代码量
                            this.change("symbolOne", "displayWood", objOne, objTwo, "阳", "+", "木");
                            break;
                        case "卯":
                            //整体调用改变样式函数，以减少代码量
                            this.change("symbolTwo", "displayWood", objOne, objTwo, "阴", "-", "木");
                            break;
                        case "辰":
                            //整体调用改变样式函数，以减少代码量
                            this.change("symbolOne", "displaySoil", objOne, objTwo, "阳", "+", "土");
                            break;
                        case "巳":
                            //整体调用改变样式函数，以减少代码量
                            this.change("symbolTwo", "displayFire", objOne, objTwo, "阴", "-", "火");
                            break;
                        case "午":
                            //整体调用改变样式函数，以减少代码量
                            this.change("symbolOne", "displayFire", objOne, objTwo, "阳", "+", "火");
                            break;
                        case "未":
                            //整体调用改变样式函数，以减少代码量
                            this.change("symbolTwo", "displaySoil", objOne, objTwo, "阴", "-", "土");
                            break;
                        case "申":
                            //整体调用改变样式函数，以减少代码量
                            this.change("symbolOne", "displayGold", objOne, objTwo, "阳", "+", "金");
                            break;
                        case "酉":
                            //整体调用改变样式函数，以减少代码量
                            this.change("symbolTwo", "displayGold", objOne, objTwo, "阴", "-", "金");
                            break;
                        case "戌":
                            //整体调用改变样式函数，以减少代码量
                            this.change("symbolOne", "displaySoil", objOne, objTwo, "阳", "+", "土");
                            break;
                        case "亥":
                            //整体调用改变样式函数，以减少代码量
                            this.change("symbolTwo", "displayWater", objOne, objTwo, "阴", "-", "水");
                            break;
                        default: alert("出现错误！");
                    }
                },
                getRandomNumber: function (min, max) {
                    return Math.floor(Math.random() * (max - min + 1)) + min;
                },
                styleProcess: function (lei, attribute) {
                    if (lei == 0) {
                        $(".dizhi").children().each(function () {
                            $(this).css({ 'background-color': "", 'color': "" }); // 将'propertyName'替换成你想获取的CSS属性名
                        });
                        $(".tiangan").children().each(function () {
                            $(this).css({ 'background-color': "", 'color': "" }); // 将'propertyName'替换成你想获取的CSS属性名
                        });
                        return;
                    }
                    $(lei).children().each(function () {
                        if ($(this).text() == attribute) {
                            $(this).css({ 'background-color': 'blue', 'color': 'white' }); // 将'propertyName'替换成你想获取的CSS属性名
                        } else {
                            $(this).css({ 'background-color': "", 'color': "" }); // 将'propertyName'替换成你想获取的CSS属性名
                        }
                    });
                    if (lei == ".tiangan") {
                        $(".dizhi").children().each(function () {
                            $(this).css({ 'background-color': "", 'color': "" }); // 将'propertyName'替换成你想获取的CSS属性名
                        });
                    } else {
                        $(".tiangan").children().each(function () {
                            $(this).css({ 'background-color': "", 'color': "" }); // 将'propertyName'替换成你想获取的CSS属性名
                        });
                    }
                },
                getRandomAttribute: function () {
                    let objOne = this.topStyle;
                    let objTwo = this.totalStyle;
                    let randomNumber = this.getRandomNumber(1, 22);
                    //1-24分别顺序代表【甲乙丙丁戊己庚辛壬癸子丑已卯辰巳午未申酉戌亥】
                    switch (randomNumber) {
                        case 1:
                            this.styleProcess('.tiangan', '甲');
                            //整体调用改变样式函数，以减少代码量
                            this.change("symbolOne", "displayWood", objOne, objTwo, "阳", "+", "木");
                            break;
                        case 2:
                            this.styleProcess('.tiangan', '乙');
                            //整体调用改变样式函数，以减少代码量
                            this.change("symbolTwo", "displayWood", objOne, objTwo, "阴", "-", "木");
                            break;
                        case 3:
                            this.styleProcess('.tiangan', '丙');
                            //整体调用改变样式函数，以减少代码量
                            this.change("symbolOne", "displayFire", objOne, objTwo, "阳", "+", "火");
                            break;
                        case 4:
                            this.styleProcess('.tiangan', '丁');
                            //整体调用改变样式函数，以减少代码量
                            this.change("symbolTwo", "displayFire", objOne, objTwo, "阴", "-", "火");
                            break;
                        case 5:
                            this.styleProcess('.tiangan', '戊');
                            //整体调用改变样式函数，以减少代码量
                            this.change("symbolOne", "displaySoil", objOne, objTwo, "阳", "+", "土");
                            break;
                        case 6:
                            this.styleProcess('.tiangan', '己');
                            //整体调用改变样式函数，以减少代码量
                            this.change("symbolTwo", "displaySoil", objOne, objTwo, "阴", "-", "土");
                            break;
                        case 7:
                            this.styleProcess('.tiangan', '庚');
                            //整体调用改变样式函数，以减少代码量
                            this.change("symbolOne", "displayGold", objOne, objTwo, "阳", "+", "金");
                            break;
                        case 8:
                            this.styleProcess('.tiangan', '辛');
                            //整体调用改变样式函数，以减少代码量
                            this.change("symbolTwo", "displayGold", objOne, objTwo, "阴", "-", "金");
                            break;
                        case 9:
                            this.styleProcess('.tiangan', '壬');
                            //整体调用改变样式函数，以减少代码量
                            this.change("symbolOne", "displayWater", objOne, objTwo, "阳", "+", "水");
                            break;
                        case 10:
                            this.styleProcess('.tiangan', '癸');
                            //整体调用改变样式函数，以减少代码量
                            this.change("symbolTwo", "displayWater", objOne, objTwo, "阴", "-", "水");
                            break;
                        case 11:
                            this.styleProcess('.dizhi', '子');
                            //整体调用改变样式函数，以减少代码量
                            this.change("symbolOne", "displayWater", objOne, objTwo, "阳", "+", "水");
                            break;
                        case 12:
                            this.styleProcess('.dizhi', '丑');
                            //整体调用改变样式函数，以减少代码量
                            this.change("symbolTwo", "displaySoil", objOne, objTwo, "阴", "-", "土");
                            break;
                        case 13:
                            this.styleProcess('.dizhi', '寅');
                            //整体调用改变样式函数，以减少代码量
                            this.change("symbolOne", "displayWood", objOne, objTwo, "阳", "+", "木");
                            break;
                        case 14:
                            this.styleProcess('.dizhi', '卯');
                            //整体调用改变样式函数，以减少代码量
                            this.change("symbolTwo", "displayWood", objOne, objTwo, "阴", "-", "木");
                            break;
                        case 15:
                            this.styleProcess('.dizhi', '辰');
                            //整体调用改变样式函数，以减少代码量
                            this.change("symbolOne", "displaySoil", objOne, objTwo, "阳", "+", "土");
                            break;
                        case 16:
                            this.styleProcess('.dizhi', '巳');
                            //整体调用改变样式函数，以减少代码量
                            this.change("symbolTwo", "displayFire", objOne, objTwo, "阴", "-", "火");
                            break;
                        case 17:
                            this.styleProcess('.dizhi', '午');
                            //整体调用改变样式函数，以减少代码量
                            this.change("symbolOne", "displayFire", objOne, objTwo, "阳", "+", "火");
                            break;
                        case 18:
                            this.styleProcess('.dizhi', '未');
                            //整体调用改变样式函数，以减少代码量
                            this.change("symbolTwo", "displaySoil", objOne, objTwo, "阴", "-", "土");
                            break;
                        case 19:
                            this.styleProcess('.dizhi', '申');
                            //整体调用改变样式函数，以减少代码量
                            this.change("symbolOne", "displayGold", objOne, objTwo, "阳", "+", "金");
                            break;
                        case 20:
                            this.styleProcess('.dizhi', '酉');
                            //整体调用改变样式函数，以减少代码量
                            this.change("symbolTwo", "displayGold", objOne, objTwo, "阴", "-", "金");
                            break;
                        case 21:
                            this.styleProcess('.dizhi', '戌');
                            //整体调用改变样式函数，以减少代码量
                            this.change("symbolOne", "displaySoil", objOne, objTwo, "阳", "+", "土");
                            break;
                        case 22:
                            this.styleProcess('.dizhi', '亥');
                            //整体调用改变样式函数，以减少代码量
                            this.change("symbolTwo", "displayWater", objOne, objTwo, "阴", "-", "水");
                            break;
                        default: alert("出现错误！");
                    }
                },
                autoExe: function ($event) {
                    if ($event.target.innerHTML == "总览") {
                        if(this.time!=""){
                            clearInterval(this.time);
                        }
                        this.time = setInterval(this.getRandomAttribute, this.interval*1000);
                    } else {
                        clearInterval(this.time);
                        this.styleProcess(0,0,0);
                    }
                }
            },
            watch : {
               interval:function(val) {
                  if(val<0){
                   alert("不能小于0秒");
                   this.interval="";
                  }
               }
            },
            mounted: function () {

            }
        });
    </script>
</body>
</html>